import React from "react";
import {Modal} from "antd";
import {ExclamationCircleOutlined} from '@ant-design/icons';
import PropTypes from 'prop-types';
import {ConfirmCarefulText, ConfirmTitle, ConfirmTitleContainer} from "@/common/Modal/style";


const Confirm = (props) => {
    let {onOk, onCancel, visible, dataSize, titleText, content} = props;
    onOk = onOk ? onOk : null;
    onCancel = onCancel ? onCancel : null;

    return (
        <>
            <Modal
                title={
                    <ConfirmTitleContainer>
                        <ExclamationCircleOutlined
                            style={{color: 'orange', fontSize: '30px', float: 'left'}}
                        />
                        <ConfirmTitle>{titleText}</ConfirmTitle>
                    </ConfirmTitleContainer>}
                visible={visible}
                onOk={onOk}
                onCancel={onCancel}
                okText='我已确认！'
                cancelText="再想想"
            >
                <>
                    {
                        content && content.length > 0 ?
                            <>{content}</>
                            :
                            <span>
                                {!dataSize ? '确定要删除该条数据吗？' : `确定要删除这${dataSize}条数据吗？`}
                                <ConfirmCarefulText>（可能造成无法挽回的损失！）</ConfirmCarefulText>
                            </span>
                    }
                </>
            </Modal>
        </>
    )
}
/* 属性校验 */
Confirm.propTypes = {
    onOk: PropTypes.func,
    onCancel: PropTypes.func,
    visible: PropTypes.bool,
    dataSize: PropTypes.number,
    titleText: PropTypes.string,
    content: PropTypes.string
}
/* 默认值 */
Confirm.defaultProps = {
    visible: false,
    titleText: '温馨提示',
    content: null,
}

export default Confirm;
